<template>
  <view class="page">
		<up-navbar @rightClick="saveGroup" @leftClick="back" title="新增分组" placeholder bgColor="#F2F1F6" :fixed="false" :titleStyle="titleStyle">
			<template #right>
				<span>保存</span>
			</template>
		</up-navbar>
		
		<view class="label">分组名称</view>
		<up-input :customStyle="customStyle" v-model="form.groupName" placeholder="请输入分组名称" border="surround" clearable></up-input>
		<view class="label">包含{{form.chatList.length}}个会话</view>
		<view class="add-box">
			<view class="add" @click="goAddChat">
				<span style="padding-top: 2px; margin-right: 6px;"><up-icon name="plus-circle" color="blue" size="20"></up-icon></span>
				<span>添加会话</span>
			</view>
			<view class="add-list">
				<view class="add-list-item" v-for="(item, index) in form.chatList" :key="index">
					<span @click="onDel(index)" style="padding-top: 4px; margin-right: 10px;"><up-icon name="minus-circle-fill" color="red" size="20"></up-icon></span>
					<up-image v-show="item.isGroup == 0" lazyLoad :src="setUserImg(item)" class="GrhomeImg" width="83rpx" height="83rpx" radius="8rpx">
						<template #error>
							<text>{{showUserName(item.name)}}</text>
						</template>
					</up-image>
					<view v-show="item.isGroup == 1" class="img" style="width: 83rpx; height: 83rpx;">
						<group-avatar :chat="item" :groupname="item.group_name"></group-avatar>
					</view>
					<span style="padding-top: 4px; margin-left: 10px;">{{item.isGroup == 1 ? item.group_name : item.username}}</span>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'
import { useUserStore } from '@/pinia-store/user'
import GroupAvatar from './GroupAvatar.vue'
	
const AvaterBaseUrl = "http://cloud.mfarmers.com/dist/interface/public/upload/avatar/";
	
export default {
	components: {
		GroupAvatar
	},
  data() {
    return {
			titleStyle: {
				fontSize: '17px',
				fontWeight: '500',
			},
			customStyle: {
				border: 'none',
				backgroundColor: '#fff',
				borderRadius: '0'
			},
			form: {
				groupName: '',
				chatList: [],
			},
			userInfo: null,
			allChatList: [],
			id: null
    };
  },
	onLoad(options) {
		this.userInfo = useUserStore().user;
		uni.$on('selectChatGroup', data => {
			this.form.chatList = JSON.parse(data);
		})
		if(options.id) {
			this.id = options.id;
			this.form.groupName = options.title;
			this.getDetail(options.id)
		}
	},
  methods: {
		async getDetail(id) {
			const params = {
				'data[account]': this.userInfo.chat_account,
				'data[token]': this.userInfo.token,
				'data[useId]': id,
				url: 'index.php/users/Group/GetGroupDetail'
			}
			const params1 = {
				'data[account]': this.userInfo.chat_account,
				'data[token]': this.userInfo.token,
				'data[myAccount]': this.userInfo.chat_account,
				// url: 'index.php/users/Index/getMyTree'
				url: 'index.php/users/Index/getChatListCached'
			}
			const msg = await chatApi(this?.userInfo?.token || token, params);
			const msg1 = await chatApi(this?.userInfo?.token || token, params1)
			this.allChatList = msg1.data.friends;
			const cache = msg.data.map(item => {
				const find = this.allChatList.find(chat => {
					return +item.detail_id === +chat. group_id || +item.detail_id === +chat. dialog_id
				})
				return find
			})
			
			this.form.chatList = cache;
		},
		// 名称超长处理
		showUserName(username) {
			return '头像'
		},
		setUserImg(item) {
			return AvaterBaseUrl+item.friend_phone+'.jpg'
		},
		onDel(index) {
			this.form.chatList.splice(index, 1);
		},
		goAddChat() {
			const that = this;
			uni.navigateTo({
				url: "/pages/chat/list/addMsgGroupChat",
				success: function(res) {
					res.eventChannel.emit('setSelectChat', { data: JSON.stringify(that.form.chatList) });
				}
			})
		},
		back() {
			uni.navigateBack();
		},
		async saveGroup() {
			if(this.form.groupName == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入分组名称'
				})
				return
			}
			if(this.form.chatList.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请选择会话'
				})
				return
			}
			let token = uni.getStorageSync('token')
			const params = {
				'data[account]': this.userInfo.chat_account,
				'data[token]': this.userInfo.token,
				'data[tags]': JSON.stringify(this.form.chatList),
				'data[groupName]': this.form.groupName,
				url: 'index.php/users/Group/addGroup'
			}
			if(this.id) {
				params.url = 'index.php/users/Group/SubGroupInfo';
				params['data[useId]'] = this.id;
			}
			
			const msg = await chatApi(this?.userInfo?.token || token, params)
			if(msg.code == 200) {
				uni.showToast({
					icon: 'none',
					title: this.id ? '已修改分组信息' : '添加分组成功',
					duration: 1500
				})
				uni.$emit('addSave');
				setTimeout(() => uni.navigateBack(), 1500)
			}else {
				uni.showToast({
					icon: 'none',
					title: msg.info,
					duration: 1500
				})
			}
		},
  }
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F2F1F6; ;
	}
	.page {
	  width: 100%;
	  min-height: 100vh; /* 保证填满屏幕 */
	  background-color: #f5f5f5;
	}
	.label {
		font-size: 14px;
		color: #999;
		margin: 10px 8px;
	}
	.add-box {
		background-color: #fff;
		.add {
			display: flex;
			align-items: center;
			padding: 10px 14px;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
		}
		.add:active {
			background-color: rgba(0, 0, 0, .1);
		}
		.add-list-item:active {
			background-color: rgba(0, 0, 0, .1);
		}
		.add-list-item {
			padding: 10px 14px;
			display: flex;
			align-items: center;
			text {
				display: inline-block;
				width: 70rpx;
				height: 70rpx;
				border-radius: 8rpx;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: #3D85FC;
			}
		}
	}
</style>
